<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
		<script src="http://wj.juccn.com/goods3d/js/TrackballControls.js"></script>
	</head>
	<body>
		<canvas id="cc"></canvas>
		
		<script>
			/***
			 *author showMet
			 */
			var renderer,camera,scene,clouds,c;//设置渲染器，设置相机，设置场景，设置星云，设置控制器
			init()
			function init() {
				renderer = new THREE.WebGLRenderer({
					canvas:document.getElementById('cc')
				})
				
				renderer.setSize(window.innerWidth,window.innerHeight)//设置渲染器大小
				
				renderer.setClearColor(0x000000)//渲染器背景色
				
				camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,10000)//设置相机--相当于人眼怎么看的意思，打过王者荣耀都知道里面有个相机设置选项，同理。
				
				camera.position.set(100,100,200)//相机位置
				camera.lookAt(new THREE.Vector3(0,0,0))//相机朝哪看，把相机想象成人的头，朝哪看就是眼睛了
				scene = new THREE.Scene()//设置场景，好放置我们需要渲染的东西
				
				var starsGeometry = new THREE.Geometry(); // an empty geometry
        for (var i = 0; i < 2000; i++) {
            // create a new vertex with random coordinates between -1 and 1
            var vertex = new THREE.Vector3();//1到-1的向量坐标
            vertex.x = Math.random() * 2 - 1;
            vertex.y = Math.random() * 2 - 1;
            vertex.z = Math.random() * 2 - 1;
            
            vertex.multiplyScalar(500);//将向量坐标转换成世界坐标，扩大500倍

            starsGeometry.vertices.push(vertex);// 几何体2000个点产生，位置使用每次循环产生的
        }
		 
		 c = new THREE.TrackballControls(camera)//控制器生效
        var starsMaterial = new THREE.PointsMaterial({//设置粒子系统材料
            color: Math.random() * 0xffffff,
            size: 2,
            sizeAttenuation: false//衰减大小
        });
        clouds = new THREE.Points(starsGeometry, starsMaterial);//粒子系统产出，使用几何体，以及粒子拆料。
      //  clouds.scale.set(200, 200, 200);
        scene.add(clouds)//放置到场景中去。皮卡丘去吧~
		      
				
				
			}
			
			
			draw()
			var i = 1
			var j = 1;
			var k = 0
			function draw() {
				
				c.update()//控制器要随时跟着每一帧动画渲染操作反应
				requestAnimationFrame(draw)
				clouds.rotation.y+=0.01
				renderer.render(scene,camera)//每一帧实时渲染，从而达到视觉观看效果，当然你也可以设置定时器试试看。
			}
		console.log(scene.children[0].geometry.vertices)
		
		
		/***
			 *author showMet
			 * 喜欢的朋友可以随时来访哟
			 * 
			 * 代码界的男神=。 =
			 */
		</script>
	</body>
</html>
